@extends('layouts.backend')

@section('backendContent')

    <el-row style="padding-top: 68px;">

        <el-row>
            <el-row class="Cubes_edit__aKGAN">
                <el-row class="Cubes_main__2cAks">
                    <input placeholder="请输入 http:// 或 https:// 开头的网址"
                           v-model="long_url"
                           class="Cubes_edit_input__1f6BE">
                    <button type="button" @click="add()" class="ant-btn Cubes_edit_btn__36O7M"><span>新建短链</span></button>
                </el-row>
            </el-row>
        </el-row>

        <div class="house-content" style="padding-top:20px;">
            <el-table
                :data="table.list"
                border
                style="width: 1200px;margin: 0 auto;">
                <el-table-column
                    prop="title"
                    label="标题"
                    width="120">
                    <template slot-scope="scope">
                        <el-row>
                            @{{ scope.row.title }}
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="route"
                    label="链接"
                    width="400">
                    <template slot-scope="scope">
                        <el-row>
                            短链接：
                            <el-link target="_blank">@{{ scope.row.domain ? (scope.row.domain + '/') : domain }}@{{ scope.row.route }}</el-link>
                            <i @click="copy((scope.row.domain ? (scope.row.domain + '/') : domain) + scope.row.route)" class="el-icon-document-copy" style="cursor:pointer;color:#409eff"></i>
                        </el-row>
                        <el-row>
                            跳转链接：
                            <el-link target="_blank">@{{ scope.row.long_url }}</el-link>
                        </el-row>
                        <el-row v-if="scope.row.default_url">
                            默认跳转链接：
                            <el-link target="_blank">@{{ scope.row.default_url }}</el-link>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="类型"
                    width="70">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.type === 'normal'">普通</el-tag>
                        <el-tag v-if="scope.row.type === 'region'" type="warning">区域</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="is_allow_qq"
                    label="允许跳转的设备"
                    width="120">
                    <template slot-scope="scope">
                        <el-row v-if="scope.row.is_allow_qq === 1">QQ</el-row>
                        <el-row v-if="scope.row.is_allow_wx === 1">微信</el-row>
                        <el-row v-if="scope.row.is_allow_pc === 1">电脑</el-row>
{{--                        <el-row v-if="scope.row.is_allow_mobile_defalut_browser === 1">手机自带浏览器</el-row>--}}
                        <el-row v-if="scope.row.is_allow_android === 1">安卓</el-row>
                        <el-row v-if="scope.row.is_allow_apple === 1">苹果</el-row>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="created_on"
                    label="统计"
                    width="190">
                    <template slot-scope="scope">
                        <el-row>
                            浏览量/PV：@{{ scope.row.pv }}
                        </el-row>
                        <el-row>
                            跳转目标链接数量：@{{ scope.row.uv }}
                        </el-row>
                        <el-row>
                            IP数：@{{ scope.row.ip }}
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="remark"
                    label="备注"
                    width="">
                </el-table-column>
                <el-table-column
                    prop="created_on"
                    label="创建时间"
                    width="110">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    style="text-align: center;"
                    width="150">
                    <template slot-scope="scope">
                        <el-link class="fr"
                                 type="danger"
                                 @click="deleteCate(scope.row.id)"
                                 style="margin-top:6px;margin-left: 10px;margin-right: 10px;">删除</el-link>
                        <el-link class="fr"
                                 type="primary"
                                 @click="editCate(scope.row.id)"
                                 style="margin-top:6px;margin-left: 10px;">编辑</el-link>
                        <el-link class="fr"
                                 type="primary"
                                 @click="copyCate(scope.row.id)"
                                 style="margin-top:6px;margin-left: 10px;">复制</el-link>
                    </template>
                </el-table-column>
            </el-table>

            <div class="block"
                 style="width: 1200px;margin: 20px auto;text-align: right;">
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="getCateList"
                    :current-page.sync="form.current_page"
                    :page-sizes="[15, 50, 100, 200]"
                    :page-size="form.page_size"
                    layout="total, sizes, prev, pager, next"
                    :total="form.total">
                </el-pagination>
            </div>
        </div>
    </el-row>

@endsection

@section('js')
    <script src="/js/short/list.js?v=202209042255"></script>
@endsection
